<template>
<div class="login">
    <top></top>
    <div class="nav-logo flex">
        <router-link to="/index">
            <img src="@/assets/logo/logo-login.png" alt="" width="180">
        </router-link>
    </div>

    <div class="login-content">
        <div class="login-item">
            <h3>登录</h3>

            <div class="login-tab">
                <span :class="tab_type ? 'active' : ''" @click="changeLoginType(1)">密码登录</span>
                <span :class="tab_type==false ? 'active' : ''" @click="changeLoginType(2)">验证码登录</span>
            </div>

            <div class="login-form">
                <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
                    <el-form-item prop="username" class="input-line" v-if="tab_type">
                        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="手机号/邮箱" @keyup.enter.native="handleLogin" class="login-input">
                            <template slot="prepend"><img src="@/assets/image/icon-account.png"></template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password" class="input-line" v-if="tab_type">
                        <el-input v-model="loginForm.password" type="password" auto-complete="off" maxlength="22" placeholder="请输入密码" @keyup.enter.native="handleLogin" class="login-input">
                            <template slot="prepend"><img src="@/assets/image/icon-passwd.png"></template>
                        </el-input>
                    </el-form-item>

                    <el-form-item prop="username" class="input-line send-phone" v-if="!tab_type">
                        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="请输入手机号" maxlength="11" @keyup.enter.native="handleLogin" class="login-input">
                            <el-select v-model="phoneType" slot="prepend" placeholder="请选择">
                                <el-option label="086" value="086"/>
                                <el-option label="886" value="886"/>
                            </el-select>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="validCode" class="input-line" v-if="!tab_type">
                        <el-input v-model="loginForm.validCode" type="text" auto-complete="off" maxlength="6" placeholder="请输入验证码" @keyup.enter.native="handleLogin" class="login-input">
                            <template slot="append"><div @click="getValidCode" :class="clickFlag?'':'disabled'">{{btnText}}</div></template>
                        </el-input>
                    </el-form-item>
                </el-form>

                <div class="form-line">
                    <router-link to="/enterprise/forget-password">
                        忘记密码？
                    </router-link>
                </div>

                <div class="form-line">
                    <a href="javascript:;" class="btn-login" @click="handleLogin">登录</a>
                </div>
            </div>
            <p style="line-height: 2">
                没有账号，去<router-link to="/reg" class="btn-login">注册</router-link>
                <br>
                <router-link to="/MainLogin" class="btn-login">企业账号登录</router-link>
            </p>
        </div>
    </div>
    <LoginFooter></LoginFooter>
</div>
</template>

<script>
import { validPhone,validEmail } from '@/utils/validate';
import { sendValidCode } from '@/api/register'
import LoginFooter from '@/views/components/footer/login-footer'
import top from '@/views/components/header/top'
export default {
  name: "login",
  data() {
    var validatePhone = (rule, value, callback) => {
      if (value === '') {
        if(this.tab_type){
            callback(new Error('账号不能为空'));
        }else{
            callback(new Error('手机号码不能为空'));
        }
      } else {
        var usernameFlag=false;
        if (validPhone(this.loginForm.username)) {
          usernameFlag=true;
          this.isPhoneOrEmail=1;
        }
        if(this.tab_type){
            if (validEmail(this.loginForm.username)) {
                usernameFlag=true;
                this.isPhoneOrEmail=2;
            }
        }
        
        if(usernameFlag){
            callback();
        }else{
            if(this.tab_type){
                callback(new Error('账号格式不正确'));
            }else{
                callback(new Error('手机号码格式不正确'));
            }
        }
      }
    };
    return {
        loginForm:{
            username:'',
            password: '',
            loginType: 'password',
            userType: 'user',
            validCode:'',
            grant_type:'mobile_password'
        },
        loginRules: {
            username: [ { validator: validatePhone, trigger: 'blur' } ],
            password: [{ required: true, trigger: "blur", message: "密码不能为空" }],
            validCode: [{ required: true, trigger: "blur", message: "验证码不能为空" }]
        },
        tab_type: true,
        select: false,
        redirect: undefined,
        clickFlag:true,
        btnText:'获取验证码',
        isPhoneOrEmail:1, //1手机，2邮箱
        timer:60,
        phoneType:"086",
    };
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  components:{top, LoginFooter},
  created() {
  },
  methods: {
    inputChange() { //输入框值改变
        this.account = this.account.replace(/[^\d]/g, '')
    },

    selected(){
        if(this.select){
            this.select = false;
        }else{
            this.select = true;
        }
    },
    handleLogin(){
        this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.$store.dispatch("Login", this.loginForm)
            .then((res) => {
                if(res==0){
                    this.$router.push({ path: this.redirect || "/account" });
                }else{
                    this.msgError(res)
                }
            }).catch((err) => {
                console.log(err);
            });
        }
      });
    },
    getValidCode(){
        if(this.clickFlag){
            var vm = this;
            var flag=true;
            vm.$refs.loginForm.validateField('username',function(msg){
                if(msg){
                flag=false;
                }
            })
            if(flag){
                this.downCount();
            }
        }
    },
    changeLoginType(val){
        if(val == 1){
            this.tab_type=true;
 
            this.loginForm.username = ''
            this.loginForm.password = ''
            this.loginForm.loginType = 'password'
        }else{
            this.tab_type=false;
 
            this.loginForm.username = ''
            this.loginForm.validCode = ''
            this.loginForm.loginType = 'validcode'
        }
        this.$refs.loginForm.clearValidate();
    },
    downCount: function () {
        var vm = this;
        if(vm.clickFlag){
            vm.clickFlag = false;      //点击button改变v-show的状态
            vm.btnText = vm.timer+"秒后重发";
            var auth_timer = setInterval(function(){  //定时器设置每秒递减
                vm.timer--;        //递减时间
                vm.btnText = vm.timer+"秒后重发";
                if(vm.timer<=0){  
                    vm.timer=60;
                    vm.clickFlag = true;    //60s时间结束还原v-show状态并清除定时器
                    vm.btnText = "获取验证码";
                    clearInterval(auth_timer)
                }
            },1000)
            vm.sendCode();
        }
    },
    sendCode(){
        var data ={
            "type": this.isPhoneOrEmail,
            "areaCode": this.phoneType,
            "scene": "login",
            "phone": this.loginForm.username,
            "email": ''
        }
        sendValidCode(data).then(res => {
            this.$message.error(res.resp_msg);
        });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    /deep/ .top{
        background: #3B4D66 !important;
    }
    
    footer{
        margin-top: 300px;
    }
    .login{
        width: 100%;
        min-height: 1080px;
        height: 100vh;
        background-color: #fff;
    }

    .nav-logo{
        width: 1200px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 50px;
    }
    
    .login-content{
        margin-left: auto;
        margin-right: auto;
        width: 1200px;
        height: 500px;
        background: url(../assets/image/login-bg.png) no-repeat;
        position: relative;
        margin-top: 95px;
        .login-item{
            position: absolute;
            top: -57px;
            right: 60px;
            width: 484px;
            height: 600px;
            background-color: #fff;
            float: right;
            box-shadow: 1px 6px 49px 1px #D9D9D9;
            border-radius: 6px;

            h3{
                font-size: 36px;
                font-weight: 400;
                color: #080808;
                line-height: 26px;
                text-align: center;
                margin-top: 50px;
            }
            
            .login-tab{
                width: 270px;
                height: 40px;
                border-bottom: 1px solid #E7E7E7;
                margin-left: auto;
                margin-right: auto;
                margin-top: 65px;
                span{
                    width: 50%;
                    display: block;
                    font-size: 16px;
                    color: #777;
                    line-height: 38px;
                    float: left;
                    text-align: center;
                    cursor: pointer;
                    &.active{
                        color: #3DABC4;
                        font-weight: bold;
                        border-bottom: 2px solid #3DABC4;
                    }
                }
            }

            .login-form{
                width: 340px;
                margin-left: auto;
                margin-right: auto;
                margin-top: 40px;

                    .area-code{
                        cursor: pointer;
                        background-color: #fff;
                        margin: -1px 0 0 -1px;
                        position: relative;
                            z-index: 2;
                        .selected{
                            border: 1px solid #e8e8e8;
                            width: 80px;
                            font-size: 16px;
                            line-height: 46px;
                            text-align: center;
                            text-indent: -10px;
                            float: left;
                            .icon-bottom{
                                display: block;
                                position: absolute;
                                top: 20px;
                                left: 60px;
                                width: 10px;
                                height: 6px;
                                background: url(../assets/image/icon-bottom.png) no-repeat;
                            }
                        }
                        dl{
                            position: absolute;
                            z-index: 2;
                            top: 47px;
                            background-color: #fff;
                            float: left;
                            border: 1px solid #e8e8e8;
                            border-top: 0;
                            width: 80px;
                            dd{
                                font-size: 14px;
                                height: 40px;
                                line-height: 40px;
                                text-align: left;
                                padding-left: 10px;

                                &:hover{
                                    font-weight: bold;
                                    color: #CE3A5B;
                                    background: #F9F9F9;
                                }
                            }
                        }
                    }

                    
                    a{
                        color: #9F9F9F;
                    }
                    a.btn-login{
                        display: block;
                        width: 340px;
                        height: 48px;
                        line-height: 48px;
                        background: #3DABC4;
                        border-radius: 4px;
                        font-size: 16px;
                        font-weight: 400;
                        color: #FFFFFF;
                        text-align: center;
                        margin-top: 45px;
                        &:hover{
                            background: #2f879b;
                        }
                    }
            }

            p{
                position: absolute;
                bottom: 40px;
                left: 0;
                width: 100%;
                text-align: center;
                color: #9F9F9F;
                a{
                    font-weight: bold;
                    color: #3EABC4;
                }
            }
        }
    }

    .tab-type{
        width: 270px;
        margin-left: auto;
        margin-right: auto;
        top: 45px;
        position: relative;
    }

</style>
<style rel="stylesheet/scss" lang="scss">
.login-content{
    .login-item{
        .login-form{
            .input-line{
                width: 340px;
                height: 48px;
                margin-left: auto;
                margin-right: auto;
                .login-input{
                    width: 340px;
                    height: 48px;
                    .el-input__inner{
                        height: 48px !important;
                        line-height: 48px !important;
                        border-left:1px solid #DCDFE6;
                        border-left:0;
                        padding-left: 0;
                    }
                    
                    .el-input-group__prepend{
                        background-color: #fff;
                        padding: 0 15px;
                        -webkit-transition: all 0.2s ease-in;
                        -moz-transition: all 0.2s ease-in;
                        -o-transition: all 0.2s ease-in;
                        -ms-transition: all 0.2s ease-in;
                        transition: all 0.2s ease-in;
                    }
                }
                .login-input.el-input-group--append{
                    .el-input__inner{
                        height: 48px !important;
                        line-height: 48px !important;
                        border: 1px solid #DCDFE6;
                        border-right:0;
                        padding-left: 15px;
                    }
                    .el-input-group__append{
                        background-color: #fff;
                        cursor: pointer;
                        color: #3EABC4;
                        -webkit-transition: all 0.2s ease-in;
                        -moz-transition: all 0.2s ease-in;
                        -o-transition: all 0.2s ease-in;
                        -ms-transition: all 0.2s ease-in;
                        transition: all 0.2s ease-in;
                    }
                    .el-input-group__append .disabled{
                        color: #999;
                    }
                }
                .el-select{
                    .el-input{
                        width: 80px;
                        border-right:0px;
                    }
                    .el-input__inner{
                        border-right: 0px;
                        padding-left: 5px;
                        padding-right: 20px;
                        text-align: center;
                    }
                }
            }
            .input-line.send-phone{
                .el-input__inner{
                    height: 48px !important;
                    line-height: 48px !important;
                    padding-left: 15px;
                }
            }
            .input-line.is-error{
                .el-input-group__append{
                    border-color: #ff4949 !important;
                }
                .el-input-group__prepend{
                    border-color: #ff4949 !important;
                }
                .el-input__inner:hover{
                    border-color: #ff4949 !important;
                }
                .el-input__inner:focus{
                    border-color: #ff4949 !important;
                }
                .el-input__inner{
                    border-color: #ff4949 !important;
                }
            }
        }
    }
}
</style>